<template>
    <div class="MainBody">
      <div class="MainContent">
          <el-header>{{ classname }}
              <span style="float: right;">{{ username }}</span>
          </el-header>
      <el-container style="height: 100vh; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']">
          <el-menu-item index="1" @click="value=0"><i class="el-icon-s-order"></i>班级列表</el-menu-item>
          <el-menu-item index="2" @click="value=1"><i class="el-icon-view"></i>班级导入</el-menu-item>
        <el-menu-item index="3" @click="value=2"><i class="el-icon-edit"></i>课程管理</el-menu-item>
        <el-button type="danger" @click="deleteCourse()" class="delete-button"
              >删除课程</el-button
            >
      </el-menu>
    </el-aside>
    
    <el-container>
      
      <el-main class="Main">
          <div v-if="value === 0">
            <PCCourseMembers></PCCourseMembers>
          </div>
  
          <div v-if="value === 1">
            <SelectImportClass></SelectImportClass>
          </div>
          <div v-if="value === 2">
            <UpdateCourse></UpdateCourse>
          </div>
      </el-main>
    </el-container>
  </el-container>
  
  </div>
    </div>
  </template>
  
  <script>
import axios from 'axios';
import PCCourseMembers from './comps/PCCourseMembers.vue';
import SelectImportClass from './SelectImportClass.vue';
import UpdateCourse from './UpdateCourse.vue';
    export default {
      data() {
  
        const item = {};
        return {
          value: 0,
          // tableData: Array(20).fill(item),
          username: localStorage.getItem('chname'),
          classname: this.$route.params.titlename
        }
      },
      components: {
        PCCourseMembers,
        SelectImportClass,
        UpdateCourse,
      },
      methods: {
        deleteCourse() {
          this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
            type: 'warning'
          }).then(() => {
            axios.delete('/course/deleteCourse?CourseId=' + this.$route.params.id).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.$router.push('/course');
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      }
    };
  </script>
  
  <style>
    .el-header {
      background-color: #B3C0D1;
      color: #333;
      line-height: 60px;
    }
    
    .el-aside {
      color: #333;
    }
  
    .MainBody{
      display: flex;
    }
    .MainContent{
      flex: 8;
      margin: 0 10%;
    }
    .Main{
      padding: 0;
    }
    .delete-button {
      margin-top: 20px;
      width: 100%;
    }
  </style>
  
  